<template>
	<view class="coupon-item" :class="coupon.disabled ? 'coupon-disabled' : `coupon-status${coupon.status}`">
		<view class="coupon-item-box main-flex">
			<view class="coupon-item-l main-flex">
				<view class="coupon-item-money">
					<text>￥</text>
					<text class="coupon-item-money-num" v-if="couponItem?.productId">{{couponItem.discountPrice}}</text>
					<text class="coupon-item-money-num" v-else-if="couponItem?.discountProportion">{{(100 - couponItem.discountProportion) / 10}}折</text>
					<text class="coupon-item-money-num" v-else>{{couponItem.discountMoney}}</text>
				</view>
				<view class="coupon-item-desc" v-if="couponItem?.productId && coupon.type == 8">商品品类满{{couponItem.leastNumber}}</view>
				<view class="coupon-item-desc" v-else-if="couponItem?.productId">购买数量满{{couponItem.leastNumber}}</view>
				<view class="coupon-item-desc" v-else>满{{couponItem.minConsume}}可使用</view>
			</view>
			<view class="coupon-item-c main-flex-item main-flex">
				<view class="coupon-item-r main-flex-item main-flex">
					<view class="coupon-item-name">{{couponItem.name}}</view>
					<view class="coupon-item-time" v-if="coupon?.customerId && coupon?.status != 1">
						<view class="coupon-item-time-red main-flex" v-if="test.digits(timeFrom(coupon.endTime))">
							仅剩<u-count-down class="coupon-item-time-red-text" :time="timeFrom(coupon.endTime) * 1000" format="HH:mm:ss"></u-count-down>
						</view>
						<view v-else>{{timeFrom(coupon.endTime)}}</view>
					</view>
					<view class="coupon-item-time" v-else>{{couponItem.startTime}}~{{couponItem.endTime}}</view>
					<view class="coupon-item-region text_line1" v-if="couponItem?.regionCode">
						使用区域{{arrText(provinceList, couponItem.regionCode)}}
					</view>
					<view class="coupon-item-region main-flex" v-if="couponItem?.productName">
						<view class="coupon-item-region-more main-flex-item">
							<view class="text_line1">仅{{couponItem.productName}}</view>
						</view>
					</view>
					<view class="coupon-item-region" v-if="!couponItem?.regionCode && !couponItem?.productName">全品类商品可用</view>
					<view class="coupon-item-bottom main-flex">
						<view class="coupon-item-down main-flex" @click="changeShowDetail">
							<text>使用说明</text>
							<uni-icons class="coupon-item-down-icon" :type="showDetail?'up':'down'" size="14" :color="coupon.disabled?'#c8c9cc':'#666666'"></uni-icons>
						</view>
						<view style="margin-left: auto;">
							<slot name="receive" :receive="coupon"></slot>
						</view>
					</view>
				</view>
				<view>
					<slot name="radio" :radio="coupon"></slot>
				</view>
			</view>
			<image class="coupon-item-icon" v-if="coupon.have === 1" src="/static/images/icon/coupon_status.png"></image>
		</view>
		<view class="coupon-item-detail" v-show="showDetail">
			<view class="coupon-item-detail-item main-flex">
				<view class="coupon-item-detail-item-name">使用规则：</view>
				<view class="coupon-item-detail-item-info main-flex-item">
					<text v-if="couponItem?.productId && coupon.type == 8">商品品类满{{couponItem.leastNumber}}</text>
					<text v-else-if="couponItem?.productId">购买数量满{{couponItem.leastNumber}}</text>
					<text v-else>满￥{{couponItem.minConsume}}</text>
					<text v-if="couponItem?.productId">；减￥{{couponItem.discountPrice}}</text>
					<text v-else-if="couponItem?.discountProportion">；打{{(100 - couponItem.discountProportion) / 10}}折</text>
					<text v-else>；减￥{{couponItem.discountMoney}}</text>
				</view>
			</view>
			<view class="coupon-item-detail-item main-flex">
				<view class="coupon-item-detail-item-name">使用说明：</view>
				<view class="coupon-item-detail-item-info main-flex-item">
					<view class="coupon-item-detail-item-info-item">该优惠券只能在廷与食材APP、廷与食材微信小程序使用；</view>
					<view class="coupon-item-detail-item-info-item">活动时间：{{couponItem.startTime}}~{{couponItem.endTime}}；</view>
					<!-- <view class="coupon-item-detail-item-info-item" v-if="couponItem?.mostUseNumber > 0">领取次数：活动期间每人最多可领取{{couponItem.mostUseNumber}}张；</view> -->
					<view class="coupon-item-detail-item-info-item" v-if="couponItem?.expirationHour">有效期：{{couponItem.expirationHour}}小时；</view>
					<view class="coupon-item-detail-item-info-item" v-if="couponItem?.regionCode">使用区域：{{arrText(provinceList, couponItem.regionCode)}}；</view>
					<view class="coupon-item-detail-item-info-item" v-if="couponItem?.productName">使用范围：仅{{couponItem.productName}}可使用；</view>
					<view class="coupon-item-detail-item-info-item" v-else>使用范围：全品类商品可使用；</view>
					<view class="coupon-item-detail-item-info-item" v-if="couponItem?.remark">其他说明：{{couponItem.remark}}；</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
  /**
   * couponItem 优惠券
   * @description 优惠券
   * @property {Object} coupon 优惠券信息
   */
	import { computed, onMounted, ref, watch } from "vue"
	import useUserStore from "@/store/modules/user"
	import useSetStore from '@/store/modules/set'
	import modal from '@/plugins/modal'
	import { timeFrom, arrText } from "@/utils/ty"
	import { test } from '@/uni_modules/uview-plus'
	// 微信小程序配置：禁用样式隔离
	defineOptions({
	  options: {
	    styleIsolation: 'shared' // 关键配置
	  }
	})
	const userStore = useUserStore()
	const setStore = useSetStore()
	const props = defineProps({
		coupon: {
			type: Object,
			default: {} 
		}
	})
	const couponItem = computed(() => {
		return props?.coupon?.customerId ? props?.coupon?.coupon || props?.coupon?.couponProduct : props?.coupon
	})
	const showDetail = ref(false)
	const changeShowDetail = () => {
		showDetail.value = !showDetail.value
	}
	const provinceList = ref([])
	watch(() => setStore.provinceList, (nVal, oVal) => {
		if (nVal) {
			provinceList.value = setStore.provinceList
		}
	}, { immediate: true })
	
</script>

<style lang="scss" scoped>
  .coupon{
  	&-item {
  		border-radius: 20rpx;
  		background-color: #ffffff;
  		box-sizing: border-box;
  		box-shadow: 0 0 10px #d3d3d3;
  		&-l {
  			width: 200rpx;
  			height: 200rpx;
  			flex-wrap: wrap;
  			flex-direction: column;
  			border-radius: 20rpx 0rpx 0rpx 20rpx;
  			background-color: $primary-color;
  			color: #ffffff;
  			text-align: center;
  			padding: 10rpx;
  			box-sizing: border-box;
  			justify-content: center;
				flex: 0 0 200rpx;
  		}
			&-c {
				height: 200rpx;
				padding: 10rpx 20rpx;
  			box-sizing: border-box;
				overflow: hidden;
			}
  		&-r {
  			width: 100%;
				height: 100%;
  			flex-wrap: wrap;
  			flex-direction: column;
  			justify-content: space-between;
				align-items: flex-start;
  			box-sizing: border-box;
				overflow: hidden;
  		}
			&-box {
				position: relative;
			}
  		&-money {
  			width: 100%;
  			font-size: 36rpx;
  			font-weight: 600;
  			&-num {
  				font-size: 56rpx;
  			}
  		}
  		&-desc {
  			width: 100%;
  			font-size: 20rpx;
  		}
  		&-name {
  			width: 100%;
  			font-size: 26rpx;
  		}
  		&-region {
				width: 100%;
  			font-size: 20rpx;
  			color: $text-light;
				&-more {
					min-width:0;
				}
  		}
			&-other {
				width: 100%;
			}
  		&-time {
  			width: 100%;
  			font-size: 20rpx;
				line-height: 28rpx;
  			color: $text-light;
				&-red {
					color: $primary-color;
				}
				:deep(.u-count-down__text) {
					font-size: 20rpx !important;
					line-height: 28rpx !important;
					color: $primary-color !important;
				}
  		}
  		&-bottom {
  			width: 100%;
  			flex-direction: row;
  		}
  		&-icon {
  			position: absolute;
  			top: 0;
  			right: 0;
  			width: 96rpx;
  			height: 96rpx;
  		}
			&-down {
				font-size: 20rpx;
				color: $text-light;
				&-icon {
					margin-left: 8rpx;
				}
			}
			&-detail {
				padding: 20rpx;
				&-item {
					font-size: 24rpx;
					line-height: 36rpx;
					align-items: flex-start;
					&-info {
						&-item {
							word-break: break-all;
						}
					}
				}
			}
			// &-btn {
			// 	width: 150rpx;
			// 	height: 48rpx;
			// 	border-radius: 24rpx;
			// 	font-size: 24rpx;
			// 	margin-left: auto;
			// 	background-color: $primary-color;
			// 	color: #ffffff;
			// 	text-align: center;
			// 	line-height: 48rpx;
			// }
			// &-btn1 {
			// 	width: 150rpx;
			// 	height: 48rpx;
			// 	border-radius: 24rpx;
			// 	font-size: 24rpx;
			// 	margin-left: auto;
			// 	border: 1px solid $primary-color;
			// 	color: $primary-color;
			// 	box-sizing: border-box;
			// 	justify-content: center;
			// }
  	}
  	.coupon-status1, .coupon-status2 {
  		.coupon-item-l {
  			background-color: #6f6f6f;
  		}
  	}
  	&-bottom {
  		position: fixed;
  		width: 100%;
  		left: 0;
  		bottom: 0;
  		background-color: #ffffff;
  		box-sizing: border-box;
  		&-box {
  			width: 100%;
  			height: 96rpx;
  			padding: 20rpx;
  			box-sizing: border-box;
  			justify-content: center;
  		}
  	}
		&-disabled {
			.coupon-item-l {
				background-color: #c8c9cc;
			}
			.coupon-item-name {
				color: #c8c9cc;
			}
			.coupon-item-detail {
				color: #c8c9cc;
			}
			.coupon-item-region {
				color: #c8c9cc;
			}
			.coupon-item-time {
				color: #c8c9cc;
			}
			.coupon-item-down {
				color: #c8c9cc;
			}
		}
  }
</style>
